<template>
  <div>
    <!--hello vue-单文件组件-->
    <!--<br/>-->
    <!--<input type="text" v-model="myText"/>-->
    <!--<button @click="handleClick()">add</button>-->
    <!--<ul>-->
    <!--  <li v-for="data in dataList" :key="data">-->
    <!--    {{ data }}-->
    <!--  </li>-->
    <!--</ul>-->

    <!--&lt;!&ndash;父 传 子&ndash;&gt;-->
    <!--<child1 myname="来自父组件的问候">-->
    <!--  <div>slot演示</div>-->
    <!--</child1>-->
    <!--<child2></child2>-->
    <TabBar v-show="isTabBarShow"></TabBar>
    <!--命名视图-->
    <!--
    <router-view></router-view>
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
    -->
    <section>
      <router-view></router-view>
    </section>
  </div>
</template>

<script>
// import Vue from 'vue'
// import Child1 from '@/components/Child1'
// import Child2 from '@/components/Child2'
// Vue.component('child1', child1)// 全局注册组件

// ES6 标准导出
import TabBar from '@/components/TabBar'
// import obj from '@/module/moduleA'// es6 导入-1 全部导入
// import { mapState, mapFilter } from '@/module/moduleB'// es6 导入-2 用哪个导入哪个
// console.log('111', mapState, mapFilter)
import { mapState } from 'vuex'

export default {
  data () {
    return {
      myText: '111111',
      dataList: []
    }
  },
  beforeCreate () {
    console.log('App-beforeCreate()')
  },
  created () {
    console.log('App-created()')
  },
  beforeMount () {
    console.log('App-beforeMount()')
    // bus.$on('kerwin', (data) => {
    //   console.log('App-接收detail', data)
    //   this.isShow = data
    // })
  },
  mounted () {
    console.log('App-mounted()')
  },
  beforeUpdate () {
    console.log('App-beforeUpdate()')
  },
  updated () {
    console.log('App-updated()')
  },
  beforeDestroy () {
    console.log('App-beforeDestroy()')
  },
  destroyed () {
    console.log('App-destroyed()')
  },
  methods: {
    handleClick () {
      console.log(this.myText)
      this.dataList.push(this.myText)
    }
  },
  components: {
    TabBar
    // Child2,
    // child1: child1 // key 和 value 一样，可以简写
    // Child1
  },
  // 计算属性 第一种写法：写一个函数，使用时像一个状态来用：缺点代码有点多
  // computed: {
  //   computedShow () {
  //     return this.$store.state.isTabBarShow
  //   }
  // }

  // 计算属性 第二种写法 缺点：计算属性只能写这个，不能写本页面自己的了
  // computed: mapState(['isTabBarShow'])

  // 计算属性 第三种写法
  // ... ex6的语法 延展对象， 几个对象拼接到一个对象里
  computed: {
    ...mapState(['isTabBarShow'])
  }
}

</script>

<style lang="scss">
ul {
  li {
    list-style: none;
    //background: red;
  }
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

section {
  margin-bottom: 50px;
}

</style>
